import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Row, Col, InputNumber } from 'antd';
import { FormComponentProps } from '@ant-design/compatible/es/form';

interface SettingInfoProps extends FormComponentProps {
  dispatch?: Dispatch;
  VisibleCabinet: boolean;
  CabinetId: number;
  ChangeSetting: (visibleCabinet: boolean) => void;
  DepositCabList?: any[];
}

interface SettingInfoState {

}

@connect(({
  cabinetManagementAdd: { DepositCabList },
}: any) => ({ DepositCabList }))

class SettingInfoElem extends Component<SettingInfoProps, SettingInfoState> {
  state = {

  }

  handleSubmit = () => {
    const {
      form: { validateFields },
      CabinetId,
      dispatch,
      ChangeSetting,
    }: any = this.props;
    validateFields((errors: any, values: any) => {
      if (!errors) {
        const request = Object.entries(values).map((item: any) => {
          const key = item[0].split('-');
          const id = key[0];
          const type = key[1];
          return `${id}-${type}-${item[1]}`;
        });
        const params = {
          cabinetId: CabinetId,
          depositStr: request.join(','),
        };
        dispatch({ type: 'cabinetManagementAdd/addOrupdate', payload: params });
        ChangeSetting(false);
      }
    });
  }

  render() {
    const {
      VisibleCabinet,
      ChangeSetting,
      DepositCabList,
      form: { getFieldDecorator },
    }: any = this.props;

    return (
      <Modal
        title="配置(用于寄存的格口比例)"
        visible={VisibleCabinet}
        width={800}
        okText="保存"
        onOk={this.handleSubmit}
        onCancel={() => ChangeSetting(false)}
      >
        <Form hideRequiredMark className="tableListForm">
          <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            {DepositCabList.map((item: any) => (
              <Col md={12} sm={24} key={item.cellTypeName} className="marginB20">
                <Row gutter={12}>
                  <Col span={18}>
                    <Form.Item label={item.cellTypeName} style={{ display: 'flex' }}>
                      {getFieldDecorator(`${item.id || 0}-${item.cellType}`, {
                        initialValue: item.maxPercent || 50,
                        rules: [{ required: true, message: `请输入${item.cellTypeName}配置` }],
                      })(
                        <InputNumber
                          min={0}
                          max={100}
                          step={1}
                          precision={0}
                          placeholder="请输入"
                          style={{ width: '100%' }}
                        />,
                      )}
                      <span className="marginL8">%</span>
                    </Form.Item>
                  </Col>
                  <Col span={6} className="marginL8" style={{ lineHeight: '32px' }}>
                    总共：{item.count || 0}
                  </Col>
                </Row>
              </Col>
            ))}
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default Form.create<SettingInfoProps>()(SettingInfoElem);
